import {ScrollView, View, Text} from "@tarojs/components";
import {useEffect, useState} from "react";
import styles from "./select_addres.module.scss";
import Taro from "@tarojs/taro";
import EventBus, {useEventBusSubscribeDelay} from "../../envent_bus/event_bus";
import {CanSelectAddressBack, NewAddressBackToSelectAddress} from "../../envent_bus/events";
import {request} from "../../utils/request";
import {apis} from "../../constants/apis";
import globalData from "../../global_data";

const SelectAddress = () => {
  const [addressList, setAddressList] = useState<any>([]); //可选地址
  const setNewAddressBackToSelectAddressListener = useEventBusSubscribeDelay<NewAddressBackToSelectAddress>(NewAddressBackToSelectAddress.eventName);

  useEffect(() => {
    getAddressList();
  }, []);

  const getAddressList = () => {
    request({
      url: apis.GET_ADDRESS_LIST,
      data: {
        customerId: globalData.userInfo.id,
      },
      pureData: false,
    }).then(res => {
      if (res.code === 200) {
        setAddressList(res.data)
      }
    })
  }

  const clickAddressGoBack = (address) => {
    EventBus.fire(CanSelectAddressBack.eventName, new CanSelectAddressBack(address));
    Taro.navigateBack();
  }

  const toEditAddress = (addressDetail) => {
    Taro.navigateTo({
      url: `../edit_address/edit_address?id=${addressDetail.id}&name=${addressDetail.name}
      &phone=${addressDetail.phone}&address=${addressDetail.address}`
    });
    setNewAddressBackToSelectAddressListener(() => {
      getAddressList();
    })
  }

  const toAddAddress = () => {
    Taro.navigateTo({
      url: "../add_address/add_address"
    });
    setNewAddressBackToSelectAddressListener(() => {
      getAddressList();
    })
  }

  return (
    <View className="container" style={{minHeight: "100vh"}}>
      <ScrollView
        scrollY={true}
        style={{
          overflowY: "scroll",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          marginBottom: "15vh",
        }}>
        <View style={{display: addressList.length > 0 ? 'flex' : 'none'}} className={styles.optional}>
          {addressList.map((item, index) => {
            return (
              <View
                style={{
                  marginBottom: index !== addressList.length - 1 ? '20rpx' : '0',
                }}
                className={styles.optional_item}>
                <View onClick={() => {
                  clickAddressGoBack(item)
                }} style={{display: "flex", alignItems: "center"}}>
                  <Text className="text-medium text-bold">{item.name}</Text>
                  <Text style={{marginLeft: "15rpx"}} className="color-third-text text-small">{item.phone}</Text>
                </View>
                <View className={styles.address_name}>
                  <View style={{width: "90%"}} onClick={() => {
                    clickAddressGoBack(item)
                  }} className="text-small color-second-text">{item.address}</View>
                  <View onClick={() => {
                    toEditAddress(item)
                  }} style={{marginLeft: "15rpx"}}
                        className="color-third-text text-small iconfont icon-bianji"/>
                </View>
                <View onClick={() => {
                  clickAddressGoBack(item)
                }} style={{
                  display: index === addressList.length - 1 ? 'none' : 'block',
                  marginTop: "20rpx",
                  width: "86vw"
                }}
                      className="divide-1-dark"/>
              </View>
            )
          })}
        </View>
      </ScrollView>

      <View onClick={toAddAddress} className={styles.add_address_btn}>
        <Text style={{fontSize: "42rpx"}} className="text-bold">+</Text>
        <Text style={{marginLeft: "15rpx"}} className="text-large">新增地址</Text>
      </View>

    </View>
  )
};
export default SelectAddress;
